<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮点击事件</title>
		<script src="jquery-3.7.0.min.js"></script>
	</head>
	<body>
		直接为按钮添加click事件：<button id="btn1">按钮1</button><br>
		使用DOM绑定onclick：<button id="btn2">按钮2</button><br>
		jQuery对象转为DOM对象<button id="btn3">按钮3</button><br>
		使用jQuery的click方法：<button id="btn4">按钮4</button><br>
		使用jQuery的bind方法：<button id="btn5">按钮5</button><br>
		使用jQuery的one方法：<button id="btn6">按钮6（一次性）</button><br>

		<script>
			$(function() {
				// 直接为按钮添加 click 事件
				$("#btn1").click(function() {
					console.log("按钮1被点击");
				});

				// 使用 DOM 绑定 onclick
				document.getElementById("btn2").onclick = function() {
					console.log("按钮2被点击");
				};

				// jQuery 对象转为 DOM 对象
				var btn = $("#btn3")[0];
				btn.onclick = function() {
					console.log("按钮3被点击");
				}

				// 使用 jQuery 的 click 方法
				$("#btn4").click(function() {
					console.log("按钮4被点击");
				});

				// 使用 jQuery 的 bind 方法
				$("#btn5").bind("click", function() {
					console.log("按钮5被点击");
				});

				// 使用 jQuery 的 one 方法，一次性绑定事件
				$("#btn6").one("click", function() {
					console.log("按钮5失效，只能点击一次");
					$("#btn5").unbind("click");
				});
			});
		</script>
	</body>
</html>
